<template>
	<view class="navigation">
		<eui-navbar ref="EuiNavBar" title="账户明细" displayable="true" color="#000000" backgroundColor="#FFFFFF"
			rightIcon="" />
		<view class="main-view">
			<scroll-view :style="{width:scrollWidth,height:scrollHeight}" scroll-y>
				<view class="approve-list flex flex-direction-column font-size-28 margin-bottom-20"
					v-for="(item,index) in datalist" :key="index">
					<eui-card @click.self="handleCardClick(item)">
						<view class="title">
							<view class="twice">
								<view class="titletext">{{item.strCardNo}}</view>
								<view class="accounttext">{{item.strDepositType}}</view>
							</view>
							<view v-if="item.strStatus=='正常'" class="status1">
								{{item.strStatus}}
							</view>
							<view v-else-if="item.strStatus=='初始'" class="status2">
								{{item.strStatus}}
							</view>
							<view v-else-if="item.strStatus=='挂失'" class="status4">
								{{item.strStatus}}
							</view>
							<view v-else-if="item.strStatus=='暂停使用'" class="status4">
								{{item.strStatus}}
							</view>
							<view v-else class="status3">
								{{item.strStatus}}
							</view>
						</view>
						<view class="scoreinfo">
							<view class="consumeitem" style="width: 270rpx;">
								<view class="custtitle">余额</view>
								<view class="consumetext">{{getNumValue(item.decDeposit)}}</view>
							</view>
							<view class="consumeitem">
								<view class="custtitle">到期时间</view>
								<view class="consumetext">{{dayjs(item.dtEndDate).format('YYYY-MM-DD') }}</view>
							</view>
							<view class="consumeitem" style="width: 50rpx;display: flex;justify-content: flex-end;">
								<image src="../../../static/img/righticon.png" class="rightimg"></image>
							</view>
						</view>
					</eui-card>
				</view>
				<view v-if="datalist.length == 0" class="no-data nodata" style="background-color: RGBA(255,255,255,0);">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
					<view class="color-888 font-size-28">暂无数据</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script setup lang="js">
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import {
		getCrmUrl,
		crmRequest,
		crmRequestAsync
	} from '@/hooks/crmServices';
	import dayjs from "dayjs";
	import dateRangUtil from '../../../common/dateRangUtil';
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth + 'px');
	const scrollHeight = ref(uni.getSystemInfoSync().windowHeight + 'px');
	const cardno = ref('');
	const customerno = ref('');
	const crmUrl = getCrmUrl();
	const datalist = ref([]);
	// 获取列表高度
	onReady(() => {
		uni.getSystemInfo({
			success: function(res) {
				const userInfoPage = uni.createSelectorQuery().select(".uni-navbar");
				userInfoPage.boundingClientRect(function(data) {
					console.log('scrollHeight.value')
					console.log(scrollHeight.value)
					scrollHeight.value = (res.windowHeight - data.height) + 'px';
				}).exec()
			}
		});
	})
	const handleCardClick = async (e) => {
		console.log('handleCardClick')
		console.log(e)
		uni.navigateTo({
			url: './odepositdetail?custno=' + customerno.value + '&cardno=' + e.strCardNo +
				'&depositType=' +
				e.strDepositType,
		});
	}
	const getData = async () => {
		var req = {
			strCustomerNo: customerno.value,
		}
		console.log(req)
		uni.showLoading({
			title: "查询中...",
			mask: true
		});
		const rspdata = await crmRequest(crmUrl.crmApi, '/crm/CustomerViewService',
			'GetCardDepositList', req);
		uni.hideLoading();
		console.log('getData')
		console.log(rspdata)
		if (rspdata) {
			datalist.value = rspdata;
		}
	}
	onLoad(e => {
		console.log("e: " + JSON.stringify(e));
		customerno.value = e.custno
		getData();
	});
	// 显示数值
	const getNumValue = (value, precision = 2) => {
		return value ? parseFloat(value).toFixed(precision) : (0).toFixed(precision)
	}
</script>

<style scoped lang="scss">
	@import '@/main.scss';

	.nodata {
		display: flex;
		flex-direction: column;
	}

	.status1 {
		display: flex;
		border: 1px solid #159C02;
		color: #159C02;
		background-color: #e1f4ec;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.status2 {
		display: flex;
		border: 1px solid #235BDA;
		color: #235BDA;
		background-color: #c7f2f0;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.status3 {
		display: flex;
		border: 1px solid #999999;
		color: #999999;
		background-color: #e6e6e6;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.status4 {
		display: flex;
		border: 1px solid #d81e06;
		color: #d81e06;
		background-color: #f9ebe2;
		border-radius: 5rpx;
		font-size: 13px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.consumetext {
		font-size: 13px;
		margin-top: 4rpx;
	}

	.rightimg {
		width: 40rpx;
		height: 40rpx;
		margin-left: 4rpx;
		margin-top: 0px;
	}

	.consumeitem {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start;
		width: 325rpx;
		flex-wrap: wrap;
		margin-top: 4rpx;
	}

	.custtitle {
		font-size: 26rpx;
		margin-right: 20rpx;
		margin-top: 2rpx;
		color: #8a8a8a;
	}

	.title {
		display: flex;
		margin-bottom: 20rpx;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	.twice {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.titletext {
		margin-right: 20rpx;
		font-weight: 600;
	}

	.accounttext {
		display: flex;
		border: 1px solid #2bc1e6;
		color: #2bc1e6;
		border-radius: 5rpx;
		font-size: 11px;
		justify-content: center;
		text-align: center;
		align-items: center;
		padding: 3px;
	}

	.scoreinfo {
		display: flex;
		flex-direction: row; //水平排列
		justify-content: flex-start; //纵向均匀排列
		flex-wrap: wrap;
	}

	.numadd {
		display: flex;
		justify-content: flex-end;
		color: #43c187;
	}

	.numcut {
		display: flex;
		justify-content: flex-end;
		color: #d81e06;
	}

	.navigation {
		display: flex;
		width: 100%;
		flex-direction: column;
		background: #F2F2F2;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
	}

	.m-card-input-view2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background: $uni-bg-color-inverse;
		box-sizing: border-box;
		border-bottom: 1rpx solid #EEEEEE;
		padding-left: 0px;
		justify-content: center; //纵向均匀排列
	}

	.m-card-input-title2 {
		width: 185rpx;
		height: 40rpx;
	}

	.m-title-text2 {
		font-size: $uni-font-size-level3;
		font-family: $uni-font-family;
		font-weight: $uni-font-weight-level1;
		color: $uni-text-color-title;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.time-view {
		display: flex;
		flex-direction: column;
	}
</style>